<template>
	<view class="container">
		<!-- LOGO -->
		<view class="time">
			<view style="font-size: 15px;color: #a3a3a3">
				<text>xxx火锅店</text>
			</view>
			<view style="color: #495298;font-size: 18px;font-weight: 600;">邀请您成为员工</view>
			<view style="display: flex;justify-content: space-between;margin-left: 20px;">
				<view style="color: #495298;font-size: 13px;font-weight: 600;">请填写个人信息，以成为其员工</view>
			</view>
			<view style="margin: 0px 20px;">
				<view style="margin-bottom: 20px;background: #fff;">
					<uv-input placeholder="请输入您的姓名" border="surround" v-model="form.faceName"></uv-input>
				</view>
				<view style="margin-bottom: 20px;background: #fff;">
					<uv-input placeholder="请输入您的联系电话" border="surround" v-model="form.facePhone"></uv-input>
				</view>
				<upload :fileList="fileList" ref="upload"></upload>
				<template>
					<upload-detail v-if="fileList.length" :fileList="fileList"></upload-detail>
				</template>

				<view style="margin-top: 30px;">
					<uv-button type="primary" size="normal" text="确认" @click="confirm"></uv-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		addShopFace
	} from '@/network/humanFace.js';
	// 上传图片 仅展示
	import upload from './camera.vue'
	export default {
		components: {
			upload
		},
		data() {
			return {
				form: {
					organId: uni.getStorageSync('organId'),
					faceName: "",
					facePhone: "",
					paperUrl: "",
					nameType: "1"
				},
				fileList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					mobile: [{
						min: 5,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					}]
				}
			}
		},
		methods: {
			getSampItemDetail() {
				// 上传图片数据
				let upload = []
				if (this.$refs.upload && this.$refs.upload.getData()) {
					upload = this.$refs.upload.getData().map((item) => {
						// return item.succImg;
						console.log(item)
						this.form.paperUrl = item.succImg
					});
				}
			},
			confirm() {
				this.getSampItemDetail()
				addShopFace(this.form).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '成功添加',
							icon: 'none',
							duration: 2000
						})
						wx.navigateTo({
							url: '/pages/humanFace/success'
						})
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f0f2fa;
	}

	.header {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time {
		width: 100%;
		height: 100%;
		/* 		background: #fff; */
		border-radius: 10px;
		line-height: 45px;
		text-align: center;
		font-size: 30px;
	}
</style>